<template>
    <div>
        <!-- header头部 -->
        <Logo />
        <!-- 返回按钮 -->
        <div class="bgColorbgColor">
            <div class = "gos" @click="GoBacks"><i class="iconfont iconfanhui"></i><span>返回</span></div>
        </div>
        <div class = "contend">
            <!-- Url地址 -->
            <p class = "addressUrl orHeader">
                <span>Url地址：</span>
                <span style = "width:590px;">{{ infoData.url }}</span>
                <span class = "copy" @click = "copy()">复制</span>
            </p>
            <!-- 学校和销售人员填写 -->
            <div class = "essentialInformation">
                <!-- 学校 -->
                <p class = "school orHeader">
                    <span>学校   ：</span>
                    <span style = "width:240px;margin-left: 15px;">{{ infoData.school_name }}</span>
                </p>
                <!-- 销售人员 -->
                <p class = "sale orHeader">
                    <span>销售人员   ：</span>
                    <span style = "margin-left: 15px;">{{ infoData.sale_id }}</span>
                    <span style = "margin-left: 10px;">{{ infoData.sale_phone }}</span>
                </p>
            </div>
            <!-- 大数据教学平台 -->
            <div class = "teaching-platform platformOr" style = "position:relative;top:15px;" v-if = "teachingAddAccounts != ''">
                <p class = "title">
                    <span class = "category">教学</span>
                </p>
                <div class = "accountOrRole">
                    <ul>
                        <li v-for = "(item,index) in teachingAddAccounts" :key = "index" style = " width: 350px;margin-right: 217px;">
                            <p class = "accountNumber" style = "width: 194px;">
                                <span>账号   ：</span>
                                <span style = "margin-left: 5px;">{{ item.usernumber | ellipsis }}</span>
                            </p>
                            <p class = "role">
                                <span>角色   ：</span>
                                <span style = "margin-left: 5px;">{{ item.role }}</span>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 大数据实训平台  v-if = "item.role == 1 ? role = '教师' : role = '学生'"-->
            <div class = "training-platform platformOr" style = "position:relative;top:20px;" v-if = "trainingAddAccounts != ''">
                <p class = "title">
                    <span class = "category">实训</span>
                </p>
                <div class = "accountOrRole">
                    <ul>
                        <li v-for = "(item,index) in trainingAddAccounts" :key = "index" style = " width: 350px;margin-right: 217px;">
                            <p class = "accountNumber"  style = "width: 194px;">
                                <span>账号   ：</span>
                                <span style = "margin-left: 5px;">{{ item.usernumber | ellipsis }}</span>
                            </p>
                            <p class = "role">
                                <span>角色   ：</span>
                                <span style = "margin-left: 5px;">{{ item.role }}</span>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 大数据科研平台 v-if = "item.role == 1 ? roletow = '教师' : roletow = '学生'" -->
            <div class = "scientific-research-platform platformOr" style = "position:relative;top:25px;"  v-if = "scientificAddAccounts != ''">
                <p class = "title">
                    <span class = "category">科研</span>
                </p>
                <div class = "accountOrRole">
                    <ul>
                        <li v-for = "(item,index) in scientificAddAccounts" :key = "index" style = " width: 251px;">
                            <p class = "accountNumber">
                                <span>账号   ：</span>
                                <span style = "margin-left: 5px;">{{ item.usernumber | ellipsis }}</span>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 数据管理系统 -->
            <div class = "data-management platformOr"  style = "position:relative;top:30px;"   v-if = "managementAddAccounts != ''">
                <p class = "title">
                    <span class = "category">数据</span>
                </p>
                <div class = "accountOrRole Last">
                    <ul>
                        <li v-for = "(item,index) in managementAddAccounts" :key = "index" style = " width: 251px;">
                            <p class = "accountNumber">
                                <span>账号   ：</span>
                                <span style = "margin-left: 5px;">{{ item.usernumber | ellipsis}}</span>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Logo from "../../components/Logo"
export default {
    components:{
        Logo,
    },
    data () {
        return {
            // 教学平台
            teachingAddAccounts:[],
            // 实训平台
            trainingAddAccounts:[],
            // 科研平台
            scientificAddAccounts:[],
            // 数据平台
            managementAddAccounts:[],
            // 其他数据
            infoData:[],
            // 从列表页传过来的学校名称
            schoolName:'',
            role:'',
            roletow:'',
        }
    },
    //靳春野过滤器filter，判断文字过长而显示省略号
    filters:{
        ellipsis(value){
            if (!value) return '';
            if (value.length > 14) {
                return value.slice(0,12) + '...'
            }
            return value
        },
    },
    created () {
        this.schoolName = this.$route.query.schoolName
        this.info()
    },
    methods:{
        // 点击复制Url
        copy(){
            this.value = this.infoData.url
            console.log(this.addressUrl)
            const input = document.createElement('input');  // 这里的逻辑就是新建立一个input标签，
            document.body.appendChild(input); // 把input添加到body中
            input.setAttribute('value',this.value); // 设置input的value值，this.hd3href
            input.select();  									// select 选中input里面的所有文本内容
            document.execCommand("Copy"); // 执行浏览器复制命令
            this.$message({  								  // 提示消息
                message: "复制成功",
                type: 'success'
            });
            document.body.removeChild(input);   // 最近需要销毁
        },

        // 查看
        info(){
            let self = this
            self.$axios.get('/school/querySchoolInfoById?schoolName=' + self.schoolName).then(response => {
                let res = response.data
                if(res.code === 200){
                    self.infoData = res.data
                    // 教学
                    self.teachingAddAccounts = res.data.teachingAddAccounts
                    // for(var i = 0; i<res.data.teachingAddAccounts.length;i++){
                    //     if(res.data.teachingAddAccounts[i].role == 1){
                    //         res.data.teachingAddAccounts[i].role = '教师'
                    //         self.role = res.data.teachingAddAccounts[i].role
                    //     }else{
                    //         res.data.teachingAddAccounts[i].role = '学生'
                    //         self.role = res.data.teachingAddAccounts[i].role
                    //     }
                    // }
                    // 实训
                    self.trainingAddAccounts = res.data.trainingAddAccounts
                    // for(var i = 0; i<res.data.trainingAddAccounts.length;i++){
                    //     if(res.data.trainingAddAccounts[i].role == 1){
                    //         res.data.trainingAddAccounts[i].role = '教师'
                    //         self.roletow = res.data.trainingAddAccounts[i].role
                    //     }else{
                    //         res.data.trainingAddAccounts[i].role = '学生'
                    //         self.roletow = res.data.trainingAddAccounts[i].role
                    //     }
                    // }
                    // 科研
                    self.scientificAddAccounts = res.data.scientificAddAccounts
                    // 数据
                    self.managementAddAccounts = res.data.managementAddAccounts

                    console.log(res.data,11111)
                    // 取群体名称
                    // self.groupName = res.data.groupName
                    // 取电话号码
                    // self.adminPhoneNumber = res.data.adminPhoneNumber
                }else{
                    self.$notify({
                        type: 'danger', message: res.message
                    })
                }
            })
        },
        //点击返回
        GoBacks(){
            window.history.back(-1)
        },
    }

}
</script>

<style lang = "scss" scoped>
    .contend{
        width: 1200px;
        position: relative;
        margin: 0 auto;
        color: #333333;
    }
    .addressUrl{
        width: 105%;
        height: 40px;
        margin-top: 40px;
        margin-bottom: 20px;
    }
    .orHeader{
        position: relative;
        margin-left: 33px;
        span{
            font-size:16px;
        }
        .copy{
            font-size: 14px;
            color: #409eff;
            border: 1px solid #b3d8ff;
            background: #ecf5ff;
            border-radius: 5px;
            margin-left: 25px;
            padding: 5px 10px;
            cursor: pointer;
        }
    }
    .essentialInformation{
        width: 100%;
        height: 40px;
        position: relative;
        margin-bottom: 6px;
        p{
            float: left;
            position: relative;

        }
        .sale{
            margin-left: 217px;
        }

    }
    .platformOr{
        clear: both;
        .title{
            position: relative;
            margin-left:33px;
            margin-bottom: 37px;
            .category{
                font-size: 18px;
                font-weight: bold;
            }
        }
        .accountOrRole{
            position: relative;
            li{

                height: 40px;
                position: relative;
                margin-left: 33px;
                margin-bottom:27px;
                float: left;
            }
            .accountNumber{
                float: left;
            }
            .role{
                position: relative;
                margin-left: 60px;
                float: left;
            }
        }
        /* 数据管理平台最后一个元素 */
        .Last{
            p:last-child{
                position:relative;
                margin-bottom: 100px;
            }
        }
    }
    /* 面包屑返回按钮样式 */
    .bgColorbgColor{
        width: 100px;
        height: 40px;
        position: absolute;
        top: 15px;
        right: 17.5%;
        cursor: pointer;
        .gos{
            position: absolute;
            cursor: pointer;
            color: #fff;
            i{
                line-height: 42px;
                font-size: 16px;
                position: relative;
                margin-left: 16px;
            }
            span{
                line-height: 42px;
                font-size: 16px;
                position: relative;
                margin-left: 10px;
            }
        }
    }
</style>

